﻿<template>
    <div class="layout-main">
        <el-form ref="wxMenu" label-position="right" label-width="120px" :model="wxMenu" :rules="rules">
            <el-input size="small" type="hidden" :model="wxMenu.id" />
            <el-form-item label="上级菜单" prop="parentId">
                <el-select size="small" v-model="wxMenu.parentId" placeholder="一级菜单" style="width: 120px">
                    <el-option v-for="m in wxMenus" v-if="m.isChild==0" v-model="m.id" :key="m.id">{{m.name}}</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="菜单名字" prop="name">
                <el-input size="small" v-model="wxMenu.name" placeholder="菜单名字" style="width: 240px" />
            </el-form-item>
            <el-form-item label="菜单类型" prop="type">
                <el-radio-group  v-model="wxMenu.type" size="small">
                    <el-radio :label="'view'">备选项</el-radio>
                    <el-radio :label="'click'">备选项</el-radio>
                    <el-radio :label="'miniprogram'">备选项</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="菜单key" prop="key" v-if="wxMenu.type=='click'">
                <el-input size="small" v-model="wxMenu.key" placeholder="菜单key" style="width: 240px" />
                <el-button size="small" type="success" @click="modalEdit=true">选择KEY</el-button>
            </el-form-item>
            <el-form-item label="跳转路径" prop="url" v-show="wxMenu.type=='miniprogram'||wxMenu.type=='view'">
                <el-input size="small" v-model="wxMenu.url" placeholder="跳转路径" style="width: 280px" />
                <br />
                <el-button type="success" size="small" @click="genUrl('/home/index.html','首页')">首页</el-button>
                <el-button type="success" size="small" @click="genUrl('/home/coupon.html','优惠券')">优惠券</el-button>
                <el-button type="success" size="small" @click="genUrl('/home/card.html','会员卡')">会员卡</el-button>
                <el-button type="success" size="small" @click="genUrl('/home/active.html','活动激活码')">活动激活码</el-button>
                <el-button type="success" size="small" @click="genUrl('/home/share.html','代言人')">代言人</el-button>
            </el-form-item>
            <el-form-item label="小程序应用ID" prop="miniAppId" v-show="wxMenu.type=='miniprogram'">
                <el-input size="small" v-model="wxMenu.miniAppId" v-if="wxMenu.type=='miniprogram'" placeholder="小程序应用ID" style="width: 240px" />
            </el-form-item>
            <el-form-item label="小程序页面路径" prop="miniPagePath" v-show="wxMenu.type=='miniprogram'">
                <el-input size="small" v-model="wxMenu.miniPagePath" placeholder="小程序页面路径" style="width: 240px" />
            </el-form-item>
            <el-form-item label="排序" prop="sortIndex">
                <el-input size="small" v-model="wxMenu.sortIndex" placeholder="排序" style="width: 240px" />
            </el-form-item>
        </el-form>
        <div>
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" :loading="modalLoading" @click="ok">确定</el-button>
        </div>
        <!-- 选择Key -->
        <WxMsgReplyChoise :show="modalEdit" :cid="wxMenu.key" v-on:cancel="choiseCancel" v-on:ok="choiseOk"></WxMsgReplyChoise>
    </div>
</template>
<script>
import api from '@/api/api'
import WxMsgReplyChoise from '../WxMsgReply/WxMsgReplyChoise.vue'
const validateNumber = (rule, value, callback) => {

    if (!value) {
        return callback(new Error('请输入正确的数字格式'));
    }
    if (isNaN(value)) {
        callback(new Error('请输入正确的数字格式'));
    }

    if (!Number.isInteger(parseInt(value))) {
        callback(new Error('请输入正确的数字格式'));
    } else {
        callback();
    }

};
export default {
    name: 'WxMenu',
    data() {



        return {
            modalEdit: false,
            loading: false,
            modalLoading: false,
            baseUrl: api.root,
            others: {

            },
            wxMenu: {
                type: 'view',

            },
            wxMenus: [],
            rules: {
                name: [
                    { required: true, message: '菜单名不能为空' }
                ],
                sortIndex: [
                    { validator: validateNumber, required: true, type: 'number' },
                    { required: true, message: '菜单名不能为空' }

                ]
            },
            wxMenuId: null
        };
    },
    mounted: function() {
        this.wxMenuId = this.$route.params.wxMenuId;

        this.getMenuList();
    },
    components: {
        WxMsgReplyChoise
    },
    methods: {
        choiseCancel: function() {

            this.modalEdit = false;
        },
        choiseOk: function(tb) {
            this.wxMenu.key = tb.key;

            this.modalEdit = false;
        },
        genUrl: function(suppix, name) {

            this.$set(this.wxMenu, "url", this.baseUrl + suppix)
        },
        cbtime: function(value) {
            this.others;
        },
        getDetail: function() {
            if (this.wxMenuId == null || this.wxMenuId == undefined || this.wxMenuId == "") return;
            var me = this;
            me.showLoading();;
            me.$http.post("/sys/wxmenu/show_" + me.wxMenuId + ".action").then(response => {
                var body = response;
                if (body.status == 0) {
                    me.wxMenu = body.obj;

                }
                me.hideLoading();
            }, response => {
                me.hideLoading();
            });
        },
        getMenuList: function() {
            var me = this;
            var params = {};
            params.current = 1;
            params.pageSize = 20;
            me.loading = true;
            me.$http.post("/sys/wxmenu/getList.action", params).then(response => {
                var body = response;
                if (body.status == 0) {

                    me.wxMenus = body.obj.list;
                    this.getDetail();
                }
                me.loading = false;
            }, response => {
                me.loading = false;
            });
        },
        ok: function() {
            var ok = false;
            this.$refs['wxMenu'].validate((valid) => {
                ok = valid;
                if (valid) {

                } else {
                    this.errorMessage('请认真填写数据');
                }
            })
            if (!ok) return;
            var me = this;

            me.modalLoading = true;
            me.$http.post("/sys/wxmenu/doSave.action", me.wxMenu).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.successMessage("保存成功！");

                    me.$router.push({ name: 'WxMenuList' });
                } else {
                    me.errorMessage("操作异常!" + body.info);
                }
                me.modalLoading = false;
            }, response => {
                me.modalLoading = false;
            });
        },
        cancel: function() {
            this.getDetail();
        }
    }
}
</script>
<style scoped>
</style>